<template>

    <a-card :title="title" :bordered="false">

        <a-table :columns="columns" :rowKey="record => record.id" :dataSource="dataSource" :pagination="pagination"
                 :loading="loading" @change="handleTableChange"
                 bordered>


            <template slot="errHint" slot-scope="text, record">





            <span v-if="$exMod.isEmptyString(record.errHint)">
                 <a-icon type="smile" :style="{ fontSize: '18px', color: '#4caf50' }"/>
            </span>


                <a-tooltip :title="record.errHint" v-else>
                    <a-icon type="bug" :style="{ fontSize: '18px', color: '#f5222d' }"/>
                </a-tooltip>


            </template>

            <template slot="isFree" slot-scope="text, record">

                <span :class=" text==='T'?'text-success' :'text-purple'  ">
                    {{ $exMod.findDict(VehicleTypeDefaultOPT, text) }}
                </span>

            </template>

            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">
                <span  v-if="record.isFree==='F'">
                      <a @click="openTimeModal(record)">设置</a>
                     <a-divider type="vertical" />
                        <a @click="openDetectionModal(record)">测试</a>
                </span>

                <span v-else>-</span>

            </template>
        </a-table>
        <!--辑器模态框-->
        <timePeriodModal v-if="showTimeModal" :record="recordTimeModal" @closeModal="closeTimeModal"/>
         <!-- 测试模态框 -->
        <Detection   v-if="detectionShow" :record="detectionRecord"  @closeModal="clsoeDetectionModal" />
    </a-card>
</template>


<script>
    import {
        pagination,
        feeRuleTable
    } from '../../public/colums.js';
    import {
        FeeRuleList,
        VehicleTypeDelete
    } from '../../public/http.js';
    import {dictLoad} from '../../../../util/internal.api';

    export default {
        props: ['activeRecord'],

        components: {
            timePeriodModal: () => import('./time_period'),
            Detection:()=>import('./detection')
        },


        data() {

            return {
                showTimeModal: false,
                recordTimeModal: {},

                detectionShow:false,
                detectionRecord:{},

                title: "计费规则表",
                dataSource: [],
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                columns: feeRuleTable, //表头管理
                searchForm: {},
                VehicleTypeDefaultOPT: [],
                VehicleTypeISFreeOPT: [],
            };
        },
        methods: {

            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                FeeRuleList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },

            closeTimeModal(e) {
                this.recordTimeModal = {};
                this.showTimeModal = false
                this.getTableList();
            },


            //2.0打开编辑器
            openTimeModal(obj = {}) {
                this.recordTimeModal = obj;
                this.showTimeModal = true;
            },


            //打开测试模态框
            openDetectionModal(obj = {}){
                if(!this.$exMod.isEmptyString(obj.errHint)){

                    this.$message.error("禁止测试:"+obj.errHint);

                    return false;
                }



                this.detectionRecord = obj;
                this.detectionShow = true;
            },

            //关闭测试模态框
            clsoeDetectionModal(e){
                this.detectionRecord = {};
                this.detectionShow = false;
            },




            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //4.0删除车辆类别
            delVechicleType(record) {
                this.loading = true;
                VehicleTypeDelete(record.id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getTableList();
                    }
                    this.loading = false;
                });
            },

            async init() {
                await dictLoad("VehicleTypeDefault").then(res => this.VehicleTypeDefaultOPT = res);
                await dictLoad("VehicleTypeISFree").then(res => this.VehicleTypeISFreeOPT = res);

            }
        },
        watch: {
            activeRecord: {
                handler(newVal, oldVal) {
                    this.title = newVal.groupName + "计费规则表";
                    this.searchForm = newVal;
                    this.searchSubmit();
                },
                deep: true
            }
        }
        ,
        created() {
            this.init();
        },

    };
</script>
